<template>
  <div>
    <city-header :cities="cities"></city-header>
    <current-city :list="cities" :hot="hotCities" :search="search"></current-city>
    <alpha-betical :cities="cities" @select="select"></alpha-betical>
  </div>
</template>

<script>
import CityHeader from './components/header.vue'
import CurrentCity from './components/Currentcity.vue'
import AlphaBetical from './components/Alphabetical.vue'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    CityHeader,
    CurrentCity,
    AlphaBetical
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      search: ''
    }
  },
  mounted () {
    axios.get('/localdata/city.json')
      .then((res) => {
        console.log(res)
        let datajson = res.data // 保存json数据
        let datalist = datajson.data // 获取列表数据
        if (datajson.ret && datalist) { // datalist这里代表不为空
          this.hotCities = datalist.hotCities
          this.cities = datalist.cities
        }
      })
  },
  methods: {
    select (key) {
      this.search = key
    }
  }
}
</script>

<style>
</style>
